<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="query1">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="课程分类">
                    <el-select v-model="formInline.region" placeholder="课程分类">
                        <el-option label="前端" value="web"></el-option>
                        <el-option label="后端" value="java"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="formInline.coursename" placeholder="课程名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table_container1">
            <el-table :data="courseFile" style="width: 100%" class="courseFile">
                <!-- <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="课程章节">
                                <a href="#" v-for="(item, i) in props.row.passage" :key="i">{{ item.name }}</a>
                                <el-button size="mini" type="Success" @click="addpassage()">添加</el-button>
                            </el-form-item>
                        </el-form>
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="课程小结" class="paries">
                                <div v-for="(item, i) in props.row.paries" :key="i">
                                    <a href="#" v-for="items in item.name " :key="items">{{ items }}</a>
                                    <el-button size="mini" type="Success" @click="addparies()">添加</el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column> -->
                <el-table-column label="课程编号" prop="id">
                </el-table-column>
                <el-table-column label="课程分类" prop="type">
                </el-table-column>
                <el-table-column label="课程名称" prop="coursename">
                </el-table-column>
                <el-table-column label="课程资料" prop="file">
                </el-table-column>
                <el-table-column label="章节资料" prop="pfile">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="selectPfile(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="Success" @click="handleEdit(scope.$index, scope.row)">添加</el-button>
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
                </el-pagination>
            </div>
            <!-- 选择章节 -->
            <el-dialog v-model="selectPassageVisible">
                <el-form :model="selectPassage">
                    <el-form-item label="选择章节" prop="passage" label-width="100px">
                        <el-select v-model="selectPassage.passage" placeholder="请选择课程章节">
                            <el-option label="第一章" value="shanghai"></el-option>
                            <el-option label="第二章" value="beijing"></el-option>
                        </el-select>
                        <el-select v-model="selectPassage.paris" placeholder="请选择课程小结">
                            <el-option label="第一小结" value="shanghai"></el-option>
                            <el-option label="第二小结" value="beijing"></el-option>
                            <el-option label="第三小结" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="selectPassageVisible = false">查 看</el-button>
                    <el-button type="primary" @click="addpassage">添 加</el-button>
                </div>
            </el-dialog>
            <!-- 添加资料(弹出框) -->
            <el-dialog title="添加/修改资料" v-model="dialogFormVisible">
                <el-form :model="selectTable">
                    <el-form-item label="课程分类" prop="type" label-width="100px">
                        <el-select v-model="selectTable.type" placeholder="请选择课程分类">
                            <el-option label="前端" value="shanghai"></el-option>
                            <el-option label="后端" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称" prop="name" label-width="100px">
                        <el-select v-model="selectTable.name" placeholder="请选择课程名称">
                            <el-option label="html" value="shanghai"></el-option>
                            <el-option label="css" value="beijing"></el-option>
                            <el-option label="vue" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上传资源" prop="file" label-width="100px">
                        <el-input type="textarea" v-model="selectTable.files"></el-input>
                        <el-button class="files">上传资源</el-button>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateShop">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>


import headTop from '../../components/headTop.vue'
import { baseUrl, baseImgPath } from '../../config/env'
import { cityGuess, getResturants, getResturantsCount, foodCategory, updateResturant, searchplace, deleteResturant } from '@/api/getData'
export default {
    data() {
        return {
            baseUrl,
            baseImgPath,
            city: {},
            offset: 0,
            limit: 20,
            count: 0,
            tableData: [],
            formInline: [],
            currentPage: 1,
            categoryOptions: [],
            selectedCategory: [],
            address: {},

            dialogFormVisible: false,
            selectPassageVisible: false,
            selectPassage: {
                passage: '',
                paris: '',
            },
            selectTable: {
                type: '',
                name: '',
                files: '',
            },
            selectTable1: {
                type: '',
                name: '',
                files: ''
            },
            courseFile: [{
                id: '001',
                type: '前端',
                coursename: 'html',
                pfile: 'http://zahngjieziliao',
                file: 'http://ghsbdxsxbxbcbdch',
                passage: [
                    { id: 1, name: '第一章' },
                    { id: 2, name: '第二章' },
                    { id: 3, name: '第三章' },
                ],
                paries: [
                    {
                        id: 1,
                        name: ['第一小结', '第二小结', '第三小结'],
                    },
                    {
                        id: 2,
                        name: ['第一小结', '第二小结', '第三小结'],
                    },
                    {
                        id: 3,
                        name: ['第一小结', '第二小结', '第三小结'],
                    },
                ]
            }, {
                id: '002',
                type: '前端',
                coursename: 'html',
                pfile: 'http://zahngjieziliao',
                file: 'http://ghsbdxsxbxbcbdch',
            }, {
                id: '003',
                type: '前端',
                coursename: 'html',
                pfile: 'http://zahngjieziliao',
                file: 'http://ghsbdxsxbxbcbdch'
            }, {
                id: '004',
                type: '前端',
                coursename: 'html',
                pfile: 'http://zahngjieziliao',
                file: 'http://ghsbdxsxbxbcbdch'
            }, {
                id: '005',
                type: '前端',
                coursename: 'html',
                pfile: 'http://zahngjieziliao',
                file: 'http://ghsbdxsxbxbcbdch'
            }]
        }
    },
    created() {
        this.initData();
        console.log(11111)
    },
    components: {
        headTop,
    },
    methods: {

        async initData() {
            try {
                this.city = await cityGuess();
                const countData = await getResturantsCount();
                if (countData.status == 1) {
                    this.count = countData.count;
                } else {
                    throw new Error('获取数据失败');
                }
                this.getResturants();
            } catch (err) {
                console.log('获取数据失败', err);
            }
        },
        async getCategory() {
            try {
                const categories = await foodCategory();
                categories.forEach(item => {
                    if (item.sub_categories.length) {
                        const addnew = {
                            value: item.name,
                            label: item.name,
                            children: []
                        }
                        item.sub_categories.forEach((subitem, index) => {
                            if (index == 0) {
                                return
                            }
                            addnew.children.push({
                                value: subitem.name,
                                label: subitem.name,
                            })
                        })
                        this.categoryOptions.push(addnew)
                    }
                })
            } catch (err) {
                console.log('获取商铺种类失败', err);
            }
        },
        async getResturants() {
            const { latitude, longitude } = this.city;
            const restaurants = await getResturants({ latitude, longitude, offset: this.offset, limit: this.limit });
            this.tableData = [];
            restaurants.forEach(item => {
                const tableData = {};
                tableData.name = item.name;
                tableData.address = item.address;
                tableData.description = item.description;
                tableData.id = item.id;
                tableData.phone = item.phone;
                tableData.rating = item.rating;
                tableData.recent_order_num = item.recent_order_num;
                tableData.category = item.category;
                tableData.image_path = item.image_path;
                this.tableData.push(tableData);
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
            this.getResturants()
        },
        selectPfile(index, row) {
            this.selectPassage = row;
            this.selectPassageVisible = true;
        },
        //添加章节
        addpassage() {
            this.selectPassageVisible = false;
            this.$router.push('./addpassage')
        },
        handleEdit(index, row) {
            this.selectTable = row;
            // this.address.address = row.address;
            this.dialogFormVisible = true;
            // this.selectedCategory = row.category.split('/');
            if (!this.categoryOptions.length) {
                this.getCategory();
            }
        },
        addparies() {
            this.$router.push('./addbrief')
        },
        addFood(index, row) {
            this.$router.push({ path: 'addGoods', query: { restaurant_id: row.id } })
        },
        async handleDelete(index, row) {
            try {
                const res = await deleteResturant(row.id);
                if (res.status == 1) {
                    this.$message({
                        type: 'success',
                        message: '删除店铺成功'
                    });
                    this.tableData.splice(index, 1);
                } else {
                    throw new Error(res.message)
                }
            } catch (err) {
                this.$message({
                    type: 'error',
                    message: err.message
                });
                console.log('删除店铺失败')
            }
        },
        async querySearchAsync(queryString, cb) {
            if (queryString) {
                try {
                    const cityList = await searchplace(this.city.id, queryString);
                    if (cityList instanceof Array) {
                        cityList.map(item => {
                            item.value = item.address;
                            return item;
                        })
                        cb(cityList)
                    }
                } catch (err) {
                    console.log(err)
                }
            }
        },
        addressSelect(vale) {
            const { address, latitude, longitude } = vale;
            this.address = { address, latitude, longitude };
        },
        handleServiceAvatarScucess(res, file) {
            if (res.status == 1) {
                this.selectTable.image_path = res.image_path;
            } else {
                this.$message.error('上传图片失败！');
            }
        },
        beforeAvatarUpload(file) {
            const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isRightType) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isRightType && isLt2M;
        },
        // 添加资料确定按钮
        async updateShop() {
            this.dialogFormVisible = false;
            // try {
            //     Object.assign(this.selectTable, this.address);
            //     this.selectTable.category = this.selectedCategory.join('/');
            //     const res = await updateResturant(this.selectTable)
            //     if (res.status == 1) {
            //         this.$message({
            //             type: 'success',
            //             message: '更新店铺信息成功'
            //         });
            //         this.getResturants();
            //     } else {
            //         this.$message({
            //             type: 'error',
            //             message: res.message
            //         });
            //     }
            // } catch (err) {
            //     console.log('更新餐馆信息失败', err);
            // }
        },
    },
}
</script>

<style lang="less" scoped>
@import '../../style/mixin';

.courseTable {
    margin-top: 18px;
}

.query1 {
    margin-top: 20px;
    margin-left: 25px;
}

.files {
    margin-top: 15px;
}

.el-table_1_column_6 .el-button {
    border: none;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}

.el-form-item a {
    margin-right: 55px;
}


.table_container1 {
    padding: 20px;
    // margin-top: -33px;
}

.Pagination {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.el-form--inline .el-form-item__label {
    float: left;
}

.el-form--inline .el-form-item__content {
    display: flex;
}

.el-form-item a {
    width: 75px;
}

.paries div a {
    display: block;
}
</style>
